<template>
	<view class="page">
		<!-- 	<view class="page-head-bg-box">
			<image  :src="getAssets('@/static/static-online/my/my-bg.png')"  mode=""></image>
		</view>
		<view class="page-navbar" :style="{background: headBackground}">
			<view class="head-nav">
				<u-navbar title="积分商城" :fixed="false" :placeholder="false" bgColor="transparent" :safeAreaInsetTop="true"
					:autoBack="true" :titleStyle="{color: '#000000', fontWeight: 500}">
				</u-navbar>
			</view>
		</view>
		<w_fill_block height="100" hasStatusBar></w_fill_block> -->
		<view class="page-ctx">
			<view class="jifenmall-wrap">
				<view class="top-box">
					<view class="jifen-box">
						<view class="bg-box">
							<image src="@/static/static-online/points/jf-top.png" mode=""></image>
						</view>

						<view class="content-box">
							<view class="jifen-num">
								<text class="value">{{myInfo.jifen || '0'}}</text>
								<text class="label">可用积分</text>
							</view>

							<view class="jifen-menu">
								<view class="jifen-menu-item" @click="toRoute('/points-record')">
									<image src="@/static/points/nav-mingxi.png"></image>
									<text>积分明细</text>
								</view>
								<view class="jifen-menu-item" @click="toRoute('/points-order-list')">
									<image src="@/static/points/nav-duihuan.png"></image>
									<text>兑换记录</text>
								</view>
								<view class="jifen-menu-item" @click="toRoute('/points-guide')">
									<image src="@/static/points/nav-guide.png"></image>
									<text>积分规则</text>
								</view>
									<view class="jifen-menu-item" @click="toRoute('/points-sign')">
									<image src="@/static/points/jfqd.png"></image>
									<text>积分签到</text>
								</view>
							</view>
						</view>

					</view>
				</view>


				<view class="bottom-wrap">
					<view class="bottom-box">
						<view class="jifen-list">
							<view class="jifen-list-title">
								<image src="@/static/points/jf-left-ico.png"></image>
								<text>积分好礼</text>
								<image src="@/static/points/jf-right-ico.png"></image>
							</view>

							<view class="points-product-wrap">
								<pointsProductList :list="products"></pointsProductList>
							</view>
						</view>

						<view class="load-more-box" style="margin-top: 50rpx;">
							<u-loadmore :status="loadmore_status" @loadmore="loadMore" />
						</view>

					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import pointsProductList from "@/components/points/pointsProductList.vue"
	export default {
		components: {
			pointsProductList
		},
		data() {
			return {
				headBackground: 'rgba(255,255,255,0)', //控制顶部标题栏颜色 默认透明颜色 transparent
				myInfo: {},

				products: [],
				count: 0,
				pagination: {
					page: 1,
					pageNum: 10
				},
				loadmore_status: 'loadmore', //loadmore  / loading / nomore
				//
			}
		},

		onLoad() {
			this.setView();
		},
		onShow() {
			this.query_user()
		},
		onPullDownRefresh() {
			setTimeout(() => {
				this.pagination.page = 1
				this.products = []
				this.setView()
				uni.stopPullDownRefresh()
			}, 500)
		},
		onReachBottom() {
			this.loadMore()
		},
		onPageScroll(e) {
			// console.log(e)
			let percent = e.scrollTop / 50;
			percent = percent < 1 ? percent : 1
			this.headBackground = `rgba(255,255,255,${percent})`
		},
		methods: {
			query_user() {
				this.$api({
					url: '/service.php',
					method: 'get',
					data: {
						action: 'users_userInfo',
					},
				}).then(res => {
					if (res.code == 200) {
						this.myInfo = res.data;
					}
				})
			},
			loadMore() {
				if (this.loadmore_status == 'loadmore') {
					this.loadmore_status = 'loading'
					this.pagination.page++;
					this.query_products();
				}
			},
			initQuery() {
				this.favs = [];
				this.pagination.page = 1;
				this.favs_loadmore_status = 'loadmore'
			},
			setView() {
				this.query_products()
			},

			query_products() {
				this.$api({
					url: '/service.php',
					method: 'get',
					data: {
						action: 'jiFen_plist',
						...this.pagination,
					},
				}).then(res => {
					if (res.code == 200) {
						this.count = res.data.count;
						let list = res.data.list;
						this.products = this.products.concat(list);
						this.loadmore_status = this.count > this.products.length ? 'loadmore' : 'nomore';
					}
				})
			},
		}
	}
</script>

<style lang="scss">
	page {
		background: #F8F8F8;
	}
</style>

<style lang="scss" scoped>
	// 设置标题左对齐
	// .page-navbar ::v-deep .u-navbar__content__left {
	// 	display: none;
	// }

	// .page-navbar ::v-deep .u-navbar__content__title {
	// 	flex: 1;
	// 	padding-left: 32rpx;
	// 	text-align: left;
	// 	font-family: PingFang SC, PingFang SC;
	// 	font-weight: 400;
	// 	font-size: 32rpx;
	// 	color: #000000;
	// }

	// 设置标题左对齐


	.page-head-bg-box {
		position: fixed;
		z-index: 1;
		top: 0;
		left: 0;
		right: 0;
		width: 100%;
		height: 562rpx;

		image {
			width: 100%;
			height: 100%;
		}
	}


	/deep/.u-sticky {
		top: 0 !important;
	}



	.page-navbar {

		background: #fff;
		background: linear-gradient(179deg, #4EC2FF 0%, #7BE1DC 100%);
		background: transparent;
		// height: 176rpx;
		position: fixed;
		z-index: 2;
		top: 0;
		left: 0;
		right: 0;

		&.show_background_color {
			background: #ffffff !important;

			.head-nav {
				background: #ffffff !important;
			}

			.head-search {
				background: #ffffff !important;
			}
		}


		.head-nav {
			background: linear-gradient(179deg, #4EC2FF 0%, #7BE1DC 100%);
			background: transparent;

			.head-nav-left-box {
				width: 270rpx;

				image {
					width: 36rpx;
					height: 36rpx;
				}

				.nav-left-text {
					margin-left: 6rpx;
					flex: 1;

					font-family: PingFang SC, PingFang SC;
					font-weight: 500;
					font-size: 30rpx;
					color: #222222;
				}
			}
		}
	}




	.page {
		.page-ctx {
			padding: 0 0rpx;
			position: relative;
			z-index: 1;
		}
	}




	.jifenmall-wrap {

		.top-box {
			padding: 0;
			height: auto;
			// background: linear-gradient(180deg, #CB0011 0%, rgba(220, 0, 12, 0) 100%);
			background: transparent;

			.jifen-box {
				height: 384rpx;
				background-repeat: no-repeat;
				background-size: 100% 100%;
				position: relative;


				.bg-box {
					height: 384rpx;


					image {
						width: 100%;
						height: 100%;
					}
				}

				.content-box {
					position: absolute;
					left: 0;
					top: 0;
					right: 0;
					bottom: 0;
				}


				.jifen-num {
					display: flex;
					flex-direction: column;
					// position: absolute;
					padding-top: 50rpx;
					padding-left: 80rpx;
					font-size: 48rpx;
					font-weight: bold;
					color: #000000;
					
					.value {
						font-size: 48rpx;
						font-weight: bold;
						color: #000000;
					}
					.label {
						font-size: 24rpx;
						color: #9695A3;
					}
				}

				.jifen-menu {
					margin-top: 72rpx;
					// position: absolute;
					// top: 184rpx;
					display: flex;
					justify-content: space-around;
					width: 100%;
					padding: 0 36rpx;

					.jifen-menu-item {
						display: flex;
						flex-direction: column;
						align-items: center;

						image {
							width: 56rpx;
							height: 56rpx;
						}

						text {
							margin-top: 10rpx;
							font-size: 24rpx;
							color: #CF7600;
						}
					}

				}
			}


		}



		.bottom-wrap {
			padding: 0rpx 32rpx;
		}

		.bottom-box {
			margin-top: 0rpx;
			background: #FFFFFF;
			box-shadow: 0rpx 0rpx 16rpx 2rpx rgba(0, 0, 0, 0.08);
			border-radius: 32rpx;
			padding-top: 32rpx;
			padding-bottom: 32rpx;
		}

		.jifen-list {
			margin: 0 0;
			background: #FFFFFF;
			padding: 0 24rpx;

			.jifen-list-title {
				display: flex;
				align-items: center;
				font-size: 60rpx;
				justify-content: center;
				margin-bottom: 32rpx;

				text {
					font-size: 36rpx;
					font-weight: bold;
					color: #000000;
					margin-right: 16rpx;
					margin-left: 16rpx;
				}

				image {
					width: 53rpx;
					height: 33rpx;
				}

			}

			.jifen-goods-list {
				display: flex;
				flex-wrap: wrap;
				justify-content: space-between;

				.jifen-goods-box {
					.goods-item-img {
						width: 310rpx;
						height: 310rpx;

						image {
							width: 100%;
							height: 100%;
						}
					}

					.goods-item-bot {
						margin-bottom: 54rpx;

						.goods-title {
							margin: 26rpx 0 8rpx;
							font-size: 28rpx;
							font-weight: bold;
							color: #000000;
						}

						.goods-jifen {
							display: flex;
							align-items: center;

							text {
								font-size: 32rpx;
								font-weight: bold;
								color: #000000;
								margin-right: 8rpx;
							}

							image {
								width: 31rpx;
								height: 32rpx;
							}
						}
					}
				}
			}
		}
	}
</style>